<template>
	<view class="container">
		<view class="banner">
			<up-swiper :list="bannerImg" imgMode="heightFix" height="115px" keyName="image_url" indicator></up-swiper>
		</view>
		<view class="content">
			<title :title="parkSituationTitle" :more="false"></title>
			<module :moduleTitle="parkSituationTitle" :data="parkSituationData"></module>

			<title :title="parkServicesTitle" :more="false"></title>
			<module :data="parkServicesData"></module>

			<!-- <title :title="noticeTitle" :more="true" target-url="/pages/parkNotice/index"></title>
			<view class="notice">
				<view class="noticeList" v-for="(item, index) in noticeData" :key="index">
					<view class="information">
						<view class="spot"><span v-show="!item.state">·</span></view>
						<view class="name">
							{{ item.name }}
						</view>
					</view>
					<view class="dateTime">
						{{ item.date }}
					</view>
				</view>
			</view> -->

			<park-notice></park-notice>

			<park-activity></park-activity>
			<!-- <title :title="parkActivitiesTitle" :more="true" target-url="/pages/parkActivities/index"></title>
			<view class="parkActivities">
				<view class="parkActivitiesList" v-for="(item, index) in parkActivitiesData" :key="index">
					<image :src="item.img" mode=""></image>
					<view class="backView">
						<view class="name">
							{{ item.name }}
						</view>
						<view class="concise">
							{{ item.concise }}
						</view>
					</view>
					<view class="state" :class="{
						state1: item.state == 1,
						state2: item.state == 2,
						state3: item.state == 3
					}"></view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
import { getCategoryList, getBanner } from '@/api/api.js'
// const imgPaths = {
// 	'园区情况': '../../static/home/parkOverview.png',
// 	'园区优势': '../../static/home/advantage.png',
// 	'厂房情况': '../../static/home/workshop.png',
// 	'投资引导': '../../static/home/investment.png',
// 	'园区风采': '../../static/home/Elegance.png',
// 	'招商手册': '../../static/home/manual.png',
// 	'内部交流': '../../static/home/inside.png'
// };
const imgPaths = [
	'../../static/mipmap-xxxhdpi/园区情况.png',
	'../../static/mipmap-xxxhdpi/园区优势.png',
	'../../static/home/workshop.png',
	'../../static/home/investment.png',
	'../../static/home/Elegance.png',
	'../../static/home/manual.png',
	'../../static/mipmap-xxxhdpi/招商手册.png'
]
import module from '../../components/homepageFunctionalModule/index.vue'
import title from '../../components/title/index.vue';
import ParkNotice from '@/components/partNotice/index.vue'
import ParkActivity from '@/components/parkActivity/index.vue'
export default {
	components: {
		module,
		title,
		ParkNotice,
		ParkActivity
	},
	data() {
		return {
			bannerImg: [
			],
			parkSituationTitle: '园区情况',
			parkSituationTitles: [
				'园区情况',
				'园区优势',
				'厂房情况',
				'投资引导',
				'园区风采',
				'招商手册',
			],
			parkServicesTitle: '园区服务',
			noticeTitle: '园区通知',
			parkActivitiesTitle: '园区活动',
			//园区情况数据
			parkSituationData: [],
			//园区服务数据
			parkServicesData: [{
				img: '../../static/mipmap-xxxhdpi/园区政策.png',
				title: '园区政策',
				url: '/pages/parkPolicies/index',
			},
			{
				img: '../../static/mipmap-xxxhdpi/报事报修.png',
				title: '报事报修',
				url: '/pages/reportedMaintenance/list'
			},
			{
				img: '../../static/mipmap-xxxhdpi/访客服务.png',
				title: '访客服务',
				url: '/pages/visitorService/index'
			},
			{
				img: '../../static/mipmap-xxxhdpi/通讯录.png',
				title: '通讯录',
				url: '/pages/mailList/index'
			},
			{
				img: '../../static/mipmap-xxxhdpi/惠生活.png',
				title: '惠生活',
				url: ''
			},
			{
				img: '../../static/mipmap-xxxhdpi/快速对接.png',
				title: '快速对接',
				url: '/pages/quickDocking/index'
			},
			{
				img: '../../static/mipmap-xxxhdpi/内部交流.png',
				title: '内部交流',
				url: '/pages/InternalCommunication/index'
			}
			],
			//园区通知数据
			noticeData: [{
				name: '2222222',
				date: '2024-11-18',
				state: false
			},
			{
				name: '11111111111111111111111111111111111111111111111111111111111111111111111111111111111',
				date: '2024-11-19',
				state: true
			}
			],
			//园区活动数据
			parkActivitiesData: [{
				img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				name: '园区当月活动',
				state: 1,
				concise: 'qwertyuiosxcvbnsdhjgsdfhjsdfjsdfjsdfsdfsdfsdfsdsdjkfhsdjkfhsdjkhfsjdhfsdfhsdhj'
			},
			{
				img: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				name: '园区当月活动',
				state: 2,
				concise: '2222222222'
			}
			]
		}
	},
	computed: {
		parkSituationMap() {
			const dict = {};
			this.parkSituationTitles.forEach((title, index) => {
				dict[title] = imgPaths[index];
			});
			return dict;
		}
	},
	onLoad() {
		this.getBanners();
		this.fetchParkData();
	},

	methods: {
		// 获取轮播图
		async getBanners() {
			try {
				const data = {
					type: '园区入驻'
				}
				const res = await getBanner(data);
				if (res.code === 2000) {
					this.bannerImg = res.data;
				}
			} catch (error) {
				console.log(error);
			}
		},
		// async getParkCondition() {
		// 	try {
		// 		const data = {
		// 			category_name: '园区介绍',
		// 			limit: 8
		// 		}
		// 		const res = await getCategoryList(data);
		// 		if (res.code == 2000) {
		// 			this.parkSituationData = res.data.data.map(i => {
		// 				// i.img = i.cover !== null ? i.cover : this.parkSituationMap[i.title];
		// 				i.img = i.cover;
		// 				i.url = '/pages/contentDetail/index';
		// 				return i;
		// 			});
		// 		}
		// 	} catch (error) {
		// 		console.log(error);
		// 	}
		// },
		async fetchParkData() {
			try {
				const requests = [
					getCategoryList({ category_name: '园区介绍', limit: 4 }),
					getCategoryList({ category_name: '园区风采', limit: 2 }),
				];

				const responses = await Promise.all(requests);

				const [parkConditionRes, parkStyleRes] = responses;

				if (parkConditionRes.code === 2000 && parkStyleRes.code === 2000) {
					const parkConditionData = parkConditionRes.data.data.map(i => ({
						...i,
						img: i.cover,
						url: '/pages/contentDetail/index',
					}));

					const parkStyleData = parkStyleRes.data.data.map(i => ({
						...i,
						img: i.cover,
						url: '/pages/contentDetail/index',
						title: i.title === '园区景色' ? '园区风采' : i.title, // 修改 title 的值
					}));

					// 合并数据
					this.parkSituationData = [...parkConditionData, ...parkStyleData];
					console.log(this.parkSituationData);
				} else {
					console.error('One or both requests failed');
				}
			} catch (error) {
				console.error(error);
			}
		}
	},
}
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: auto;
	background-color: #e6e6e6;
	padding-bottom: 50rpx;
	// display: flex;
	// flex-direction: column;
	// align-items: center;
	// justify-content: center;

	.banner {
		width: 100%;
		// height: 300rpx;
		overflow: hidden;
	}

	.content {
		height: 100%;
		padding: 0 25rpx;

		.notice {
			height: auto;
			background-color: #fefefe;
			border-radius: 10rpx;
			box-shadow: 3rpx 3rpx 15rpx 1rpx rgba(0, 0, 0, 0.1);
			padding: 30rpx;

			.noticeList {
				margin-bottom: 25rpx;

				.information {
					display: flex;
					align-items: center;

					.spot {
						width: 15rpx;
						font-weight: bold;
						color: #ff4542;
						margin-right: 5rpx;
					}

					.name {
						font-size: 25rpx;
						font-weight: 500;
						color: #2d2a31;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.dateTime {
					margin-top: 10rpx;
					font-size: 22rpx;
					color: #9097ba;
					text-indent: 1em;
				}
			}

			.noticeList:last-child {
				margin-bottom: 0;
			}
		}

		.parkActivitiesList {
			margin-bottom: 10rpx;
			position: relative;
			height: 300rpx;
			overflow: hidden;
			border-radius: 10rpx;

			image {
				width: 100%;
				height: 300rpx;
			}

			.backView {
				position: absolute;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.3);
				color: #f6f2f1;
				width: 100%;

				.name {
					padding: 20rpx 30rpx;
					font-weight: bold;
					font-size: 23rpx;
				}

				.concise {
					font-weight: bold;
					font-size: 20rpx;
					padding: 0rpx 30rpx 20rpx 30rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.state {
				width: 150rpx;
				height: 150rpx;
				position: absolute;
				right: -5rpx;
				top: -5rpx;
			}

			.state1 {
				background-image: url('../../static/home/notStartedYet.svg');
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

			.state2 {
				background-image: url('../../static/home/haveInHand.svg');
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

			.state3 {
				background-image: url('../../static/home/ended.svg');
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}

		.parkActivitiesList:last-child {
			margin-bottom: 0;
		}
	}
}
</style>